<template>
  <div>
    <el-container height="700px" > 
        <!-- //头部 -->
        <el-header height="70px">  
          <div style="text-align: center; font-size: 22px; margin-top: 50px;">业绩看板</div>
        </el-header>

        <!-- //身体 -->
          <el-main>
            <!-- 本日业绩,本月业绩 -->
            <el-container>
              <el-col >
              
                  <el-tabs  :stretch=true v-model="activeName" @tab-click="handleClick">

                      <el-tab-pane label="本日业绩" name="today" >
                          <br>
                          <el-card class="box-card" >
                              <div class="text item">
                                  <span style="font-size:19px;"><b>{{ this.dayCount+'单' }}</b></span>
                                  <br>
                                  <br>
                                  {{'总配送'}}
                              </div>
                          </el-card>
                      </el-tab-pane>

                      <el-tab-pane label="本月业绩" name="month" >
                          <br>
                          <el-card class="box-card" >
                              <div class="text item">
                                  <span style="font-size:19px;"><b>{{ this.monthCount+'单' }}</b></span>
                                  <br>
                                  <br>
                                  {{'总配送'}}
                              </div>
                          </el-card>
                      </el-tab-pane>

                  </el-tabs>

              </el-col>
            </el-container>
  

            
            
          </el-main>

        <!-- //尾部 -->
        
    <el-footer>

          <!-- <div style="margin:-10px">
          
              <el-menu router mode="horizontal">
              <el-menu-item index="1" @click="$router.push('index')">首  页</el-menu-item>
              <el-menu-item index="2" @click="$router.push('type')"> 分  类</el-menu-item>    
              <el-menu-item index="3" @click="$router.push('carts')"> 购 物 车</el-menu-item>
              <el-menu-item index="4" @click="$router.push('my')"> 我  的</el-menu-item>
              </el-menu> 
          
          
          </div> -->


          </el-footer>
    </el-container>


  </div>
</template>

<script>
  
export default {
    data(){
        return{

          dayCount:'',
          monthCount:'',
          activeName: 'today',
        }
    },
    methods:{
      DateToStr(date) {
        //日期转字符串格式
        var year = date.getFullYear();//年
        var month = date.getMonth();//月
        var day = date.getDate();//日
        var hours = date.getHours();//时
        var min = date.getMinutes();//分
        var second = date.getSeconds();//秒
        return year + "-" +
            ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
            (day > 9 ? day : ("0" + day)) + " " +
            (hours > 9 ? hours : ("0" + hours)) + ":" +
            (min > 9 ? min : ("0" + min)) + ":" +
            (second > 9 ? second : ("0" + second));
        },
      handleClick(tab, event) {
      console.log(tab, event);
      if(tab.index==0){
        //每日订单
          //this.dayCount=20;
          let orders={};
          orders.dispatcherId=sessionStorage.getItem("dispatcherId");
          let beginTime = new Date(new Date(new Date().toLocaleDateString()).getTime()); // 当天0点
          let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1);// 当天23:59
          orders.distributionBeginTime=this.DateToStr(beginTime);
          orders.distributionEndTime=this.DateToStr(endTime);
          console.log(orders.distributionBeginTime);
          console.log(orders.distributionEndTime);
          
          this.$axios.post('api/app/distribution/getOwnPerformance',orders)
          .then(res=>{
            console.log(res.data.data);
                  if(res.data.code==200){
                      console.log(res.data);
                      this.dayCount=res.data.data;
                      console.log(this.dayCount);
                  }
          })
      }else if(tab.index==1){
        //每月订单
          //this.monthCount=40;
          let param ={};
          param.dispatcherId=sessionStorage.getItem("dispatcherId");
          var firstDay = new Date();
          firstDay.setDate(1); //第一天
          firstDay.setHours(0);
          firstDay.setMinutes(0);
          firstDay.setSeconds(0);
          var now=new Date();
          param.distributionBeginTime = this.DateToStr(firstDay);
          param.distributionEndTime = this.DateToStr(now);
          console.log(param.distributionBeginTime);
          console.log(param.distributionEndTime);
          this.$axios.post('api/app/distribution/getOwnPerformance?dispatcherId',param)
         .then(res=>{
                  if(res.data.code==200){
                      console.log(res.data);
                      this.monthCount=res.data.data;
                      console.log(this.monthCount);
                  }
          })
      }
    },
        

    },
    created(){
      let tab={};
      tab.index=0;
       this.handleClick(tab);
    }
}
</script>

<style>
.el-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  background-color:rgba(246, 246, 246, 1)
}
  <!-- .el-row{
    background-color: white;
    border-radius: 10px;
    
  } -->
  .text {
  font-size: 14px;
}

.item {
  padding: 0px ;
  margin-top: 50px;
  margin-left: 120px;

}

.box-card {

  width: 500px;
  height: 200px;
}

  .textBtn{
    padding-left: 10px;
  }
  .el-icon-map-location{
    font-size: 20px;
    height: 20px;
    margin: 6px;
  }
  .sel{
    position:absolute;
    clip:rect(2px 90px 30px 2px);
    width:100px;
    height:10px;
    line-height:20px;
    font-size:20px;
    font-weight:bold;
  }
  .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  background-color: #efefef;
}
.el-avatar>img {
  margin: 0px 0px 0px -5px;
}
</style>